<template>
  <div class="shop">
    <el-tabs v-model="activeName"
      type="card"
      @tab-click="handleClick">
      <el-tab-pane label="一级乐粉"
        name="first">
        <div style="height:40px;">

          <p style="width:200px;float:left;">粉丝数： {{fansnum}}</p>

        <!-- <el-input size="mini"
          v-model="fansForm.fansId"
          style="float:right;margin-left:12px;width:140px;"
          placeholder="请输入id搜索">
          <i slot="suffix" class="el-input__icon el-icon-search"  @click="searchServiceFans"></i>
          </el-input> -->
        <el-input size="mini"
          v-model="fansForm.fansPhone"
          style="float:right;margin-left:12px;width:140px;"
          placeholder="请输入手机号搜索">
          <i slot="suffix" class="el-input__icon el-icon-search"  @click="searchServiceFans"></i>
          </el-input>
        <!-- <el-select style="width:140px;float:right;"
          size='mini'
          v-model="fansForm.fansStatus"
          filterable
          placeholder="请选择账号状态">
          <el-option label="全部"
            :value="0">全部</el-option>
          <el-option label="正常"
            :value="5"></el-option>
          <el-option label="禁用"
            :value="15"></el-option>
        </el-select> -->
        <!-- <span style="float:right;margin-top:3px;color:#666666;">账号状态：</span> -->
        </div>
        <div class="line"></div>
        <el-table :data="fansData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
           <el-table-column label="用户ID" prop='id'></el-table-column>
           <el-table-column label="用户名" prop='username'></el-table-column>
           <el-table-column label="用户账号" prop="mobile"></el-table-column>
           <el-table-column label="淘客订单数" >
             <p>--</p>
             <!-- <template slot-scope="scope">
               <p v-if="scope.row.taoOrderNum<0">--</p>
               <p v-else>{{scope.row.taoOrderNum}}</p>
             </template> -->
           </el-table-column>
           <el-table-column label="自营订单数" >
             <!-- <template slot-scope="scope">
               <p v-if="scope.row.ziOrderNum<0">--</p>
               <p v-else>{{scope.row.ziOrderNum}}</p>
             </template> -->
             <p>--</p>
           </el-table-column>
           <el-table-column label="京东CPS订单数">
             <!-- <template slot-scope="scope">
               <p v-if="scope.row.jdOrderNum<0">--</p>
               <p v-else>{{scope.row.jdOrderNum}}</p>
             </template> -->
             <p>--</p>
           </el-table-column>
           <!-- <el-table-column label="账号状态">
             <template slot-scope="scope">
               <p v-if="scope.row.status == 1">正常</p>
               <p v-if="scope.row.status == 2">已禁用</p>
             </template>
           </el-table-column> -->
           <el-table-column label="粉丝绑定时间" prop="create_time"></el-table-column>
           <el-table-column label="最近一次活跃时间" prop="last_time"></el-table-column>
        </el-table>

          <div class="pagination">
        <el-pagination background
          @current-change="fanspageChange"
          :current-page="fansForm.fanspage"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="fansnum"></el-pagination>
      </div>

      </el-tab-pane>


      <el-tab-pane label="服务小店"
        name="second">
        <div style="height:40px;">
          <p style="width:120px;float:left;">幕后街数： {{shopnum}}</p>

        <el-input size="mini"
          v-model="shopForm.keywords"
          style="float:right;margin-left:12px;width:140px;"
          placeholder="请输入小店名或账号搜索">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="searchServiceShop"></i>
          </el-input>
        <!-- <el-input size="mini"
          v-model="shopForm.shopname"
          style="float:right;margin-left:12px;width:140px;"
          placeholder="请输入小店名称搜索">
          <i slot="suffix" class="el-input__icon el-icon-search" @click="searchServiceShop"></i>
          </el-input> -->
          <el-select style="width:100px;float:right;"
          size='mini'
          v-model="shopForm.pay_type"
          filterable
          placeholder="缴费类型">
          <el-option label="全部"
            :value="3"></el-option>
          <el-option label="全额缴费"
            :value="1"></el-option>
          <el-option label="押金缴费"
            :value="2"></el-option>
            <el-option label="未缴费"
            :value="0"></el-option>
          </el-select>
          <span style="float:right;margin-top:3px;color:#666666;margin-left:12px;">缴费类型：</span>
          <!-- <el-select style="width:100px;float:right;"
          size='mini'
          v-model="shopForm.is_vip_shop"
          filterable
          placeholder="是否会员">
          <el-option label="是"
            :value="1"></el-option>
          <el-option label="否"
            :value="0"></el-option>
          </el-select>
        <span style="float:right;margin-top:3px;color:#666666;">是否会员店：</span> -->

        <el-select style="width:110px;float:right; margin-right:12px;" v-model="shopForm.type_id" filterable placeholder="全部" size="mini">
             <el-option v-for="item in statusList" :key="item.id" :label="item.title" :value="item.id"></el-option>
        </el-select>

        <span style="float:right;margin-top:3px;color:#666666;">商家分类：</span>


        <!-- <el-select style="width:100px;float:right;margin-right:8px;"
          size='mini'
          v-model="shopForm.status"
          filterable
          placeholder="选择状态">
          <el-option label="全部"
            :value="0">全部</el-option>
          <el-option label="待提交"
            :value="5"></el-option>
          <el-option label="审核中"
            :value="15"></el-option>
          <el-option label="已入驻"
            :value="20"></el-option>
          <el-option label="审核驳回"
            :value="25"></el-option>
          </el-select>
        <span style="float:right;margin-top:3px;color:#666666;">小店状态：</span> -->
        </div>
        <div class="line"></div>

        <el-table :data="shopData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column label="UID" prop="uid"></el-table-column>
      <el-table-column label="幕后街名称" prop="shop_name"></el-table-column>
      <el-table-column label="幕后街账号" prop="mobile"></el-table-column>
      <el-table-column label="门店地址">
        <template slot-scope="scope">{{scope.row.province}} {{scope.row.city}} {{scope.row.area}}</template>
      </el-table-column>
      <el-table-column label="服务类目">
        <template slot-scope="scope">
          <p class="shop_cate" v-if="scope.row.title">{{scope.row.title}}</p>
          <p  class="shop_cate" v-else>---</p>
        </template>
      </el-table-column>
      <!-- <el-table-column label="是否会员店">
         <template slot-scope="scope">
           <p >{{scope.row.is_vip_shop_word}}</p> -->
           <!-- <p v-else>否</p> -->
        <!-- </template>
      </el-table-column> -->
      <el-table-column label="缴费类型">
        <template slot-scope="scope">
           <p  v-if="scope.row.vip_shop_pay_type == 1">全额缴费</p>
          <p   v-if="scope.row.vip_shop_pay_type == 2">押金缴费</p>
           <p   v-if="scope.row.vip_shop_pay_type == 0">未缴费</p>
        </template>
      </el-table-column>
      <el-table-column label="小店粉丝数">
        <p>--</p>
      </el-table-column>
      <el-table-column label="小店会员数" >
        <p>--</p>
      </el-table-column>
      <!-- <el-table-column label="抵现卡数/已开卡">
        <template slot-scope="scope">
           {{scope.row.cash_num}}/{{scope.row.bind_cash}}
        </template>
      </el-table-column>
      <el-table-column label="喜卡数/已开卡">
        <template slot-scope="scope">
          {{scope.row.card_num}}/{{scope.row.bind_card}}
        </template>
      </el-table-column> -->
      <!-- <el-table-column label="小店状态">
        <template slot-scope="scope">
          <p v-if="scope.row.status == 1">待提交</p>
          <p v-if="scope.row.status == 2">审核中</p>
          <p v-if="scope.row.status == 3">已入驻</p>
          <p v-if="scope.row.status == 4">审核驳回</p>
        </template>
      </el-table-column> -->
      </el-table>

      <div class="pagination">
        <el-pagination background
          @current-change="shopspageChange"
          :current-page="shopForm.page"
          :page-size="shopForm.size"
          layout="total, prev, pager, next, jumper"
          :total="shopnum"></el-pagination>
      </div>
      </el-tab-pane>


      <el-tab-pane label="邀请服务商"
        name="third">
       <div style="height:40px;">

          <p style="width:200px;float:left;">邀请服务商数： {{servicenum}}</p>

        <!-- <el-input size="mini"
          v-model="serviceForm.inviteId"
          style="float:right;margin-left:12px;width:140px;"
          placeholder="请输入id搜索">
          <i slot="suffix" class="el-input__icon el-icon-search"  @click="searchServiceInvite"></i>
          </el-input> -->
        <el-input size="mini"
          v-model="serviceForm.invitePhone"
          style="float:right;margin-left:12px;width:140px;"
          placeholder="请输入手机号搜索">
           <i slot="suffix" class="el-input__icon el-icon-search"  @click="searchServiceInvite"></i>
          </el-input>

        <el-select style="width:140px;float:right;"
          size='mini'
          v-model="serviceForm.inviteStatus"
          filterable
          placeholder="请选择账号状态">
          <el-option label="全部"
            :value="2">全部</el-option>
          <el-option label="正常"
            :value="0"></el-option>
          <el-option label="禁用"
            :value="1"></el-option>
        </el-select>
        <span style="float:right;margin-top:3px;color:#666666;">账号状态：</span>
        </div>
        <div class="line"></div>
        <el-table :data="serviceData"
      style="width:100%"
      max-height="680"
      :cell-style="tc"
      :header-cell-style="tccolor">
           <el-table-column label="用户ID" prop='uid'></el-table-column>
           <el-table-column label="用户名">
             <template slot-scope="scope">
               <p v-if="scope.row.user">{{scope.row.user.username}}</p>
               <p v-else>--</p>
             </template>
           </el-table-column>
           <el-table-column label="用户账号" >
             <template slot-scope="scope">
               <p v-if="scope.row.user">{{scope.row.user.mobile}}</p>
               <p v-else>--</p>
             </template>
           </el-table-column>
           <!-- <el-table-column label="服务区域" prop="region"></el-table-column> -->
           <el-table-column label="账号状态">
             <template slot-scope="scope">
               <p v-if="scope.row.is_enable == 0">正常</p>
               <p v-if="scope.row.is_enable == 1">已禁用</p>
             </template>
           </el-table-column>
           <el-table-column label="成为服务商时间" prop="created_at"></el-table-column>
           <el-table-column label="入驻成功时间" prop="settled_success_time"></el-table-column>
        </el-table>


         <div class="pagination">
        <el-pagination background
          @current-change="servicespageChange"
          :current-page="serviceForm.invitepage"
          :page-size="15"
          layout="total, prev, pager, next, jumper"
          :total="servicenum"></el-pagination>
      </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>

// import {
//   shopTypeList,
// } from "@/api/goods";
// import {
//   serviceProviderInvitationSearch,
//   serviceProviderFansUidSearch,
// } from "@/api/service"
// import {
//   shopList,
// } from "@/api/goods";
export default {
  data () {
    return {
      serviceId: '',
      //1 一级乐粉 2 服务小店 3 邀请服务商
      activeName: 'first',

      //粉丝数
      fansnum: 0,
      fansForm: {
        fanspage:1,
        //一级乐粉 输入手机号
        fansPhone: '',
      },
      fansData:[],

      // 邀请服务商数
      servicenum:0,
      serviceForm:{
        //一级乐粉 账号状态
        inviteStatus: '',
        //一级乐粉 账号ID
        // inviteId: '',
        //一级乐粉 输入手机号
        invitePhone: '',
        invitepage:1,
      },
      serviceData:[],


      //幕后街数
      shopnum: 0,
      shopForm:{
         type_id: '',
        //   status: "",
        group_id: "",
        is_up_goods: "",
        //   activity: "",
        is_up_coupon: "",
        keywords: "",
        city_area: 0,
        adcode: "",
        is_up_cash_coupon: "",
        is_vip_shop:'',
        is_up_activity:'',
        page: 1,
        size: 20,
        invitation_id:'',
       pay_type:'',
      },
      statusList:[],
      shopData:[],



    }
  },
  mounted () {
    this.serviceId = this.shopForm.invitation_id=this.$route.query.serviceId
    this.activeName = this.$route.query.type
    this.getShopList()
    if(this.activeName == 'third'){
      this.getserviceProviderInvitationSearchData()
    }else if(this.activeName == 'first'){
      this.getserviceProviderFansUidSearchData()
    }else if(this.activeName == 'second'){
      this.getShopListData()

    }
  },
  methods: {



    // 一级乐粉 搜索
    searchServiceFans () {
       this.getserviceProviderFansUidSearchData()
    },
    //邀请服务商 搜索
    searchServiceInvite(){
       this.getserviceProviderInvitationSearchData()
    },
    //幕后街 搜索
    searchServiceShop(){
      this.getShopListData()
    },
    handleClick (tab) {
      if(tab.index == 0){
         this.getserviceProviderFansUidSearchData()
      }else if(tab.index == 1){
        this.getShopListData()
      }else{
        this.getserviceProviderInvitationSearchData()
      }
    },

       async getShopList() {
      let res = await shopTypeList({ keywords: "", page: 1, size: 40 });

      this.statusList = res.data.data;
    },

    //获取服务商数据
    servicespageChange(page){
      this.serviceForm.invitepage = page
      this.getserviceProviderInvitationSearchData()
    },
    async getserviceProviderInvitationSearchData(){
      if(this.serviceForm.inviteStatus == 2){
        this.serviceForm.inviteStatus = ''
      }
       var url = "status="+this.serviceForm.inviteStatus+
                 "&username="+this.serviceForm.invitePhone+
                "&uid="+this.serviceId+
                "&page="+this.serviceForm.invitepage
       let res = await serviceProviderInvitationSearch(url)

       if(res.code === 10000){
         this.serviceData = res.data.data
         this.servicenum = res.data.total
       }else{
          this.$message.error(res.message)
       }
    },

    //服务商粉丝-一级乐粉
    fanspageChange(page){
      this.fansForm.fanspage = page
      this.getserviceProviderFansUidSearchData()
    },
    shopspageChange(page){
      this.shopForm.page = page
      this.getShopListData()
    },
     //获取小店列表
    async getShopListData() {
      if(this.shopForm.pay_type == 3){
        this.shopForm.pay_type =  ''
      }
      let res = await shopList(this.shopForm);
      this.shopData = res.data.data;
      this.shopnum = res.data.total;
    },
    async getserviceProviderFansUidSearchData(){
      var url = 'mobile='+this.fansForm.fansPhone
      let res  = await serviceProviderFansUidSearch(this.serviceId,url)
      if(res.code === 10000){
        this.fansData = res.data.data
        this.fansnum  = res.data.total
      }else{
        this.$message.error(res.message)
      }
    },
    tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
  },

}
</script>

<style lang="scss" scoped>
.shop {
  padding: 20px;
  .line{
    height: 1px;
    background-color: #e5e5e5;
    margin:0px 0 20px;
  }
  .el-input__icon{
    cursor: pointer;
  }
  .pagination{
    float: right;
  }
}
</style>

